import React from 'react';
import { Toast, } from 'antd-mobile';
import ReactPullLoad, { STATS } from "react-pullload";
import "../../../../node_modules/react-pullload/dist/ReactPullLoad.css";

export default class Index extends React.Component {
    constructor(props){
        super(props)
        this.state={
            allNum: 0,
			hasMore: true,
			data:[],
			action: STATS.init,
			page: 1,
        }
    }
	componentDidMount(){
        document.title = '我的团队'
        this.getList()
	}
	getList(){
		var req={
            page: 1,
			size: 12,
        }
        global.Ajax.hhtc_request("user/myTeam",req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					hasMore=false
				}
                this.setState({
                    data: data.data.data,
                    hasMore: hasMore,
                    page: this.state.page,
                    allNum: data.data.allNum,
                });
            }
		})
	}
	// 获取商品
	handleAction = action => {
		console.info(action, this.state.action, action === this.state.action);
		//new action must do not equel to old action
		if (action === this.state.action) {
		  	return false;
		}
		if (action === STATS.refreshing) {
		  	//刷新
		  	this.handRefreshing();
		} else if (action === STATS.loading) {
		  	//加载更多
		  	this.handLoadMore();
		} else {
		  	//DO NOT modify below code
		  	this.setState({
				action: action
		  	});
		}
	};	
	handRefreshing = () => {
		if (STATS.refreshing === this.state.action) {
		  	return false;
		}
        var req={
            page: 1,
			size: 12,
        }
        global.Ajax.hhtc_request("user/myTeam",req).then(data=>{
			if(data.code===1){
				var hasMore;
                if(data.data.length>0){
					this.state.page++
					hasMore=true
                }else{
					hasMore=false
				}
                this.setState({
                    data: data.data.data,
                    hasMore: hasMore,
                    action: STATS.refreshed,
                    page: this.state.page,
                });
            }
		})
		this.setState({
		  	action: STATS.refreshing
		});
	};
	handLoadMore = () => {
		if (STATS.loading === this.state.action) {
		  	return false;
		}
		//无更多内容则不执行后面逻辑
		if (!this.state.hasMore) {
		  	return;
        }
        var req={
            page: this.state.page,
			size: 12,
        }
        global.Ajax.hhtc_request("user/myTeam",req).then(data=>{
			if(data.code===1){
                if(data.data.length>0){
					this.setState({
                        data: this.state.data.concat(data.data.data),
                        action: STATS.reset,
                    });
				}else{
					this.setState({
                        action: STATS.reset,
                        hasMore: false
                    });
				}
            }
		})
		this.setState({
		  	action: STATS.loading
		});
	};
	render(){
		return(
			<div className='team_box'>
                <img alt='' src={require('../../imgs/teambg.png')} className='teambg' />
                <p className='p1'>我的团队(人)</p>
                <p className='p2'>{this.state.allNum}</p>
                <h2>团队列表</h2>
                <ReactPullLoad
					downEnough={100}
					action={this.state.action}
					handleAction={this.handleAction}
					hasMore={this.state.hasMore}
					distanceBottom={100}
				>
                    <div className='list'>
                        {this.state.data.map((item,index)=>{
                            return(
                                <div key={'list'+index} className='row'>
                                    <img alt='' src={item.avatar} />
                                    <h2>{item.nickname}</h2>
                                    <p>{item.atime}</p>
                                </div>
                            )
                        })}
                    </div>
				</ReactPullLoad>
			</div>
		)
	}
}
